﻿<template>
    <div class="h100 df ai-c jc-sb f-p-0-20 bg-eee">
        <img class="logo" src="/logo.svg" alt="logo" />

        <!-- <div class="f-1 f-center">{{ $t('Base.test') }}</div> -->
        <div class="avatar df">
            <Language />

            <el-dropdown @command="opration" class="f-ml-20">
                <div>
                    <span>zyl</span>
                    <el-icon>
                        <arrow-down />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="1">个人中心</el-dropdown-item>
                        <el-dropdown-item command="2">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import Language from '@/components/common/language/index.vue';
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';

const userStore = useUserStore();
const router = useRouter();

const opration = (command: string) => {
    switch (command) {
        case '1':
            break;
        case '2':
            userStore.logout();
            router.push('/');
            break;
    }
};
</script>

<style scoped lang="scss">
.logo {
    width: 130px;
    height: 50px;
}

.avatar {
    width: auto;
}
</style>
